<template>
  <div>
<h2>{{age}}</h2>
<!-- v-on:事件名="要执行的少量代码" -->
<button v-on:click="age++">点击</button>
<!-- v-on:事件名="methods中的函数名" -->
<button v-on:click="add">点击2</button>
 <!-- v-on:事件名=“methods中的函数名(实参)"  -->
 <button v-on:click="addFn(6)">点击3</button>
 <!-- @事件名="同上" -->
 <button @click="age++">简写</button>

  </div>
</template>

<script>
export default {
  data() {
    return {
      age:29
    }
  },
  //methods 是一个对象
  methods: {
    // 在 methods 的函数里面，可以通过this，访问到 data 里面的数据
    add() {
      this.age++
    },
    addFn (num) {
      this.age += num
    }
  }

}
</script>

<style>

</style>